<template>
  <div>
    <div>
      <a-button type="primary" @click="toInfo">添加员工</a-button>
       <a-button type="primary" danger>导入excel</a-button>
        <a-button type="primary" >导出excel</a-button>
    </div>
      <a-table :pagination="false" :columns="columns" :dataSource="props.pList">
        <!-- 表头的自定义 -->
        <template #headerCell="{column}">
          <template v-if="column.key=='tou'">
              头像<TaobaoCircleFilled />
          </template>
        </template>
        <!-- 表格单元格的自定义插槽 -->
        <template #bodyCell="{column,record}">
          <template v-if="column.key=='tou'">
              <img class="tou"  v-if="record.staffPhoto" :src="record.staffPhoto" /> 
              <div class="toutext" v-else>{{record.username.substr(0,1) }}</div>
          </template>
          <template v-if="column.key=='formOfEmployment'">
              {{record.formOfEmployment==1?'正式':'非正式'}}
          </template>
          <template v-if="column.key=='action'">
                  <a-button type="link" @click="toMyinfo(record.id)">查看</a-button>
                  <a-button type="link">角色</a-button>
                  <a-button type="link" @click="toDel(record.id)">删除</a-button>
          </template>
        </template>
      </a-table>
      <div style="display: flex;justify-content:flex-end; background: white">
        <a-pagination @change="getPage" v-model:current="current" :total="50" show-less-items />
      </div>
  </div>
</template>
<script lang="ts" setup>
  import {ref,defineProps,defineEmits} from 'vue'
  
  import {TaobaoCircleFilled} from '@ant-design/icons-vue'
  import {delEmployee} from '../../../api/person'
  import {message} from 'ant-design-vue'
  import {useRouter} from 'vue-router'

  let router=useRouter();


  // 表头数据
    let columns=[
      {
            title: '头像',
            key: 'tou',
      },
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
      },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
      },
        {
            title: '工号',
            dataIndex: 'workNumber',
            key: 'workNumber',
      },
        {
            title: '聘用形式',
            dataIndex: 'formOfEmployment',
            key: 'formOfEmployment',
      },
        {
            title: '部门',
            dataIndex: 'departmentName',
            key: 'departmentName',
      },
        {
            title: '入职时间',
            dataIndex: 'timeOfEntry',
            key: 'timeOfEntry',
      },
        {
            title: '操作',
            dataIndex: 'name',
            key: 'action',
      }

    ]
    let props=defineProps<{
        pList:Array<any>
    }>()
    let current=ref(0)
    // 父传子 当前页码
    let emit=defineEmits(["sendPage","sendTree"])
    let getPage=(currentPage:any)=>{
        current.value=currentPage;
        // 子传父
        emit("sendPage",currentPage)
    }
    // 删除接口
    let toDel=async (id:number)=>{
        let res=await delEmployee(id)
        console.log(res)
        message.success("删除成功")
    }
    // 跳转详情并通知父组件 传参
      let toInfo=()=>{
       // 跳转添加页面
      emit("sendTree")
       router.push({name:"perinfo"})
   }
  let toMyinfo=(id:any)=>{
      router.push({name:"perinfo",
        query:{id:id}
      })
  }
</script>
<style lang="less" scoped>
  .tou{
    width:50px;
    height:50px;
    border-radius: 50%;
  }
  .toutext{
      width:50px;
    height:50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background: darkcyan;
    color:white;
  }
</style>